Same problem here (e.g. <ol><li> or Markdown would be better.) I wondering if this is important to help the screen readers

I'm curious why we are deviating from the form factor / pattern for our typical example containers and showing code inline vs. "show example code"? Is this an intentional deviation? If so, what's the rationale?

I'd think we'd be making use of <Example />'s code prop.

Will need to connect with @britt6612 to help me learn how to add raw code urls via code prop

If we are going to display this code sample inline, this should be jsx not txt.

Updated to jsx

Are we using caption (which renders in the DOM as a figcaption) appropriately here? It seems like we are trying to describe the experience/interaction behavior vs. the figcaption "describing the rest of the contents of its parent

I'd expect a figcaption to read "Example demonstrating how an "ascending navigation" anchor allows a user to navigate from a child page to its parent."

I'm not sure the "1. Page loads on Overview child page" and "2. Interacting with the Ascending Navigation link brings the user to the home page" adds much value -- can likely be eliminated. If we do think describing these interactions is needed, this should probably be placed in line with the preceding paragraph.

Removed

We should not have a Grommet wrapper here.

Removed

We are re-creating how "Example containers" are displayed within the site and creating fragmentation, additional deviation and overhead. Why not just use the Example container's properties for consistency?

Replaced custom box container with example.

The screen reader will read out both "Go to Home page" and the icon's aria-label "Home". Which is redundant and confusing. Need to suppress the latter.

added

This is unnecessary.

removed

These represent pages, not sections. For clarity variable names should align to what they represent.

Comment applies to references of "section" throughout.

In this a configuration or the pages content?

updated

I'm not really a fan of this pattern here because it is harder to read and takes a lot of effort to follow. For clarity and flexibility, I'd rather follow the pattern you use in HomeContent.js. Similarly create OverviewContent.js, Components.js, Help.js and eliminate the whole config concept.

Instead you can replace all of that with:

const [activePage, setActivePage] = useContext('home');

const pageContent = {
  home: <HomeContent />,
  overview: <OverviewContent />,
  components: <ComponentsContent />,
  help: <HelpContent />
};


....

<>
  {pageContent[activePage]}
<>

Moved into separate pages and named PageOne, PageTwo... etc so we can update to any content.

the initials wont pass accessibility we need to use

   <Text size="large" color="text-strong">
        JS
      </Text>

Changed the BG color and font size, passed acessibiity test in chrome

<Avatar background="dark-2" size="small"> <Text size="medium" color="text-strong">{datum.initials}</Text> </Avatar>

@SeamusLeonardHPE sorry but can we use background="decorative-green" to match our other examples for Avatar and I think we are recommending using decorative-green

Updated to
1- color decorative-green
2- Size medium
3- Removed text size prop (inherited from avatar)

                <Avatar background="decorative-green" size="medium">
                  <Text color="text-strong">
                    {datum.initials}
                  </Text>
                </Avatar>

thanks

why do we need this margin?

With margin="none"

without margin prop

I dont think we need the height

Aligns icon height with heading line height using technique suggested in guidance

https://design-system.hpe.design/foundation/icons#aligning-with-text

can we simplify code to be

export const SectionCard = ({ section, onClick }) => (
  <Card default onClick={() => onClick(section.id)} pad="xsmall">
    <Box align="center" direction="row" fill justify="between">
      <Heading level="2" size="small">
        {section.label}
      </Heading>
      <LinkNext />
    </Box>
    <Paragraph>{section.subtitle}</Paragraph>
  </Card>
);

Adressed need for addtional props in points above

export const SectionCard = ({ section, onClick }) => (
  <Card default onClick={() => onClick(section.id)} pad="xsmall">
    <Box direction="row" fill justify="between">
      <Heading level="2" size="medium" margin="none">
        {section.label}
      </Heading>
      <LinkNext height="xlarge" />
    </Box>
    <Paragraph>{section.subtitle}</Paragraph>
  </Card>
);

I dont think we need those boxes

remove this box as well